import React, { useEffect, useState } from 'react';
import cls from '@/components/TargetActivity/index.module.less';
import { Button, Card, Empty, Tabs, Space } from 'antd';
import { IActivity } from '@/ts/core';
import { ScrollView } from 'devextreme-react';
import dxScrollView from 'devextreme/ui/scroll_view';

import activityEmptyImg from '/img/empty/noactivity.png';
import { command } from '@/ts/base';
import ActivityMessage from '@/components/TargetActivity/ActivityMessage';
import { useSessionContext } from '../../../content';
interface ActivityProps {
  height: number | string;
  activity: IActivity;
  title?: string;
  showTitle?: boolean;
}

/** 动态 */
const TargetActivityNew: React.FC<ActivityProps> = ({
  height,
  activity,
  title,
  showTitle = true,
}) => {
  const ActivityBody: React.FC<{ activity: IActivity }> = ({ activity }) => {
    const [actionList, setActivityList] = useState(activity.activityList);

    useEffect(() => {
      const id = activity.subscribe(() => {
        setActivityList([...activity.activityList]);
      });
      return () => {
        activity.unsubscribe(id);
      };
    }, [activity]);
    if (actionList.length > 0) {
      return actionList.map((actionItem) => (
        <ActivityMessage
          key={actionItem.key}
          item={actionItem}
          activity={actionItem.activity}></ActivityMessage>
      ));
    }
    return (
      <div className={cls.emptyList}>
        <Empty description={false} image={activityEmptyImg}></Empty>
      </div>
    );
  };
  const { updateContent } = useSessionContext();
  const [activityType, setActivityType] = useState('activity');
  const loadMoreActivity = async (component: dxScrollView | undefined) => {
    const news = await activity.load(10);
    if (news.length > 0) {
      activity.changCallback();
    }
    if (component) {
      await component.release(news.length < 10);
    }
  };
  return (
    <Card
      bordered={false}
      title={showTitle ? title || '动态' : undefined}
      style={{ flex: '1' }}
      extra={
        showTitle &&
        <Space>
          <Tabs
            key={activityType}
            type="card"
            onChange={(key) => {
              setActivityType(key);
            }}
            items={[
              {
                key: 'activity',
                label: '动态',
              },
            ]}
          />
          {activity.allPublish && (
            <Button
              onClick={() => {
                command.emitter('executor', 'pubActivity', activity);
              }}
              type="link">
              发动态
            </Button>)
          }
          <Button
            onClick={() => {updateContent('activity')}}
          >
            更多
          </Button>
        </Space>
      }>
      <ScrollView
        key={activity.key}
        bounceEnabled
        width={'100%'}
        height={height}
        reachBottomText="加载更多..."
        onReachBottom={(e) => loadMoreActivity(e.component)}
        onInitialized={(e) => loadMoreActivity(e.component)}>
        <div className={cls.actionList}>
          <ActivityBody activity={activity} />
        </div>
      </ScrollView>
    </Card>
  );
};

export default TargetActivityNew;
